<template>
  <div class="main-container" style="height: 100%">
    <div class="item-content" style="height: 100%">
      <div class="form-content" style="margin-bottom: 20px; height: 100%">
        <div style="height: 100%">
          <myTable
            :loading="isLoading"
            tabHeight="600"
            ref="table"
            :data="data"
            :label="label"
            :addShow="true"
            :searchShow="true"
            :paginationConfig="paginationConfig"
            @deleteRow="deleteRow"
            @selectionChange="selectionChange"
            @changePage="changePage"
            @changeSize="changeSize"
            @edit="edit"
          >
            <template #c>
              <el-radio v-model="radio" label="1">符合</el-radio>
              <el-radio v-model="radio" label="2">不符合</el-radio>
            </template>
            <template #d>
              <el-input type="textarea" rows="3"></el-input>
            </template>
          </myTable>
        </div>
      </div>
    </div>
    <myDialog
      :Form="Form"
      :label="label2"
      :visible="visible"
      @disVisible="visible = false"
      @submitSecurity="submitSecurity"
    >
      <template #remark="obj">
        <el-input
          placeholder="请输入备注"
          type="textarea"
          :rows="2"
          v-model="obj.params.row.remark"
        >
        </el-input>
      </template>
    </myDialog>
  </div>
</template>

<script setup>
const radio = ref("1");
const label = ref([
  {
    label: "序号",
    prop: "a",
  },
  {
    label: "检查项目",
    prop: "b",
  },
  {
    label: "符合与否",
    prop: "c",
    columnType: "slot",
    slotName: "c",
  },

  {
    label: "问题描述",
    prop: "d",
    columnType: "slot",
    slotName: "d",
  },
]);
const label2 = ref([
  {
    label: "序号",
    prop: "a",
  },
  {
    label: "检查项目",
    prop: "b",
  },
  {
    label: "符合与否",
    prop: "c",
  },

  {
    label: "问题描述",
    prop: "d",
  },
]);
const data = ref([
  {
    a: "1",
    b: "安全出口存在下列情形之一的：1.矿井直达地面的独立安全出口少于 2 个，或者与设计不一致；2.矿井只有两个独立直达地面的安全出口且安全出口的间距小于 30 米，或者矿体一翼走向长度超过 1000 米且未在此翼设置安全出口；3.矿井的全部安全出口均为竖井且竖井内均未设置梯子间，或者作为主要安全出口的罐笼提升井只有 1 套提升系统且未设梯子间；4.主要生产中段(水平)、单个采区、盘区或者矿块的安全出口少于 2 个，或者未与通往地面的安全出口相通；5.安全出口出现堵塞或者其梯子、踏步等设施不能正常使用，导致安全出口不畅通",
  },
  {
    a: "2",
    b: "使用国家明令禁止使用的设备、材料或者工",
  },
  {
    a: "3",
    b: "不同矿权主体的相邻矿山井巷相互贯通，或者同一矿权主体相邻独立生产系统的井巷擅自贯通",
  },
  {
    a: "4",
    b: "地下矿山现状图纸存在下列情形之一的：1.未保存《金属非金属矿山安全规程》(GB16423-2020)第 4.1.10 条规定的图纸，或者生产矿山每 3 个月、基建矿山每 1 个月未更新上述图纸；2.岩体移动范围内的地面建构筑物、运输道路及沟谷河流与实际不符；3.开拓工程和采准工程的井巷或者井下采区与实际不符；4.相邻矿山采区位置关系与实际不符；5.采空区和废弃井巷的位置、处理方式、现状，以及地表塌陷区的位置与实际不符",
  },
  {
    a: "5",
    b: "露天转地下开采存在下列情形之一的：1.未按设计采取防排水措施；2.露天与地下联合开采时，回采顺序与设计不符；3.未按设计采取留设安全顶柱或者岩石垫层等防护措施",
  },
  {
    a: "6",
    b: "矿区及其附近的地表水或者大气降水危及井下安全时，未按设计采取防治水措施",
  },
  {
    a: "7",
    b: "井下主要排水系统存在下列情形之一的：1.排水泵数量少于 3 台，或者工作水泵、备用水泵的额定排水能力低于设计要求；2.井巷中未按设计设置工作和备用排水管路，或者排水管路与水泵未有效连接；- 5 -3.井下最低中段的主水泵房通往中段巷道的出口未装设防水门，或者另外一个出口未高于水泵房地面 7 米以上；4.利用采空区或者其他废弃巷道作为水仓。",
  },
  {
    a: "8",
    b: "井口标高未达到当地历史最高洪水位 1 米以上，且未按设计采取相应防护措",
  },
  {
    a: "9",
    b: "水文地质类型为中等或者复杂的矿井，存在下列情形之一的：1.未配备防治水专业技术人员；2.未设置防治水机构，或者未建立探放水队伍；3.未配齐专用探放水设备，或者未按设计进行探放水作业。",
  },
  {
    a: "10",
    b: "水文地质类型复杂的矿山存在下列情形之一的：1.关键巷道防水门设置与设计不符；2.主要排水系统的水仓与水泵房之间的隔墙或者配水阀未按设计设置",
  },
  {
    a: "11",
    b: "在突水威胁区域或者可疑区域进行采掘作业，存在下列情形之一的：1.未编制防治水技术方案，或者未在施工前制定专门的施工安全技术措施；2.未超前探放水，或者超前钻孔的数量、深度低于设计要求，或者超前钻孔方位不符合设计要求",
  },
  {
    a: "12",
    b: "受地表水倒灌威胁的矿井在强降雨天气或者其来水上游发生洪水期间，未实施停产撤人",
  },
  {
    a: "13",
    b: "有自然发火危险的矿山，存在下列情形之一的：1.未安装井下环境监测系统，实现自动监测与报警；2.未按设计或者国家标准、行业标准采取防灭火措施；- 6 -3.发现自然发火预兆，未采取有效处理措施",
  },
  {
    a: "14",
    b: "相邻矿山开采岩体移动范围存在交叉重叠等相互影响时，未按设计留设保安矿(岩)柱或者采取其他措施",
  },
  {
    a: "15",
    b: "地表设施设置存在下列情形之一，未按设计采取有效安全措施的：1.岩体移动范围内存在居民村庄或者重要设备设施；2.主要开拓工程出入口易受地表滑坡、滚石、泥石流等地质灾害影响。",
  },
  {
    a: "16",
    b: "保安矿(岩)柱或者采场矿柱存在下列情形之一的：1.未按设计留设矿(岩)柱；2.未按设计回采矿柱；3.擅自开采、损毁矿(岩)柱",
  },
  {
    a: "17",
    b: "未按设计要求的处理方式或者时间对采空区进行处理",
  },
  {
    a: "18",
    b: "工程地质类型复杂、有严重地压活动的矿山存在下列情形之一的：1.未设置专门机构、配备专门人员负责地压防治工作；2.未制定防治地压灾害的专门技术措施；3.发现大面积地压活动预兆，未立即停止作业、撤出人员。",
  },
  {
    a: "19",
    b: "巷道或者采场顶板未按设计采取支护措施",
  },
  {
    a: "20",
    b: "矿井未采用机械通风，或者采用机械通风的矿井存在下列情形之一的：1.在正常生产情况下，主通风机未连续运转；2.主通风机发生故障或者停机检查时，未立即向调度室和企业主要负责人报告，- 7 -或者未采取必要安全措施；3.主通风机未按规定配备备用电动机，或者未配备能迅速调换电动机的设备及工具；4.作业工作面风速、风量、风质不符合国家标准或者行业标准要求；5.未设置通风系统在线监测系统的矿井，未按国家标准规定每年对通风系统进行 1 次检测；6.主通风设施不能在 10 分钟之内实现矿井反风，或者反风试验周期超过 1 年",
  },
  {
    a: "21",
    b: "未配齐或者随身携带具有矿用产品安全标志的便携式气体检测报警仪和自救器，或者从业人员不能正确使用自救器",
  },
  {
    a: "22",
    b: "担负提升人员的提升系统，存在下列情形之一的：1.提升机、防坠器、钢丝绳、连接装置、提升容器未按国家规定进行定期检测检验，或者提升设备的安全保护装置失效；2.竖井井口和井下各中段马头门设置的安全门或者摇台与提升机未实现联锁；3.竖井提升系统过卷段未按国家规定设置过卷缓冲装置、楔形罐道、过卷挡梁或者不能正常使用，或者提升人员的罐笼提升系统未按国家规定在井架或者井塔的过卷段内设置罐笼防坠装置；4.斜井串车提升系统未按国家规定设置常闭式防跑车装置、阻车器、挡车栏，或者连接链、连接插销不符合国家规定；5.斜井提升信号系统与提升机之间未实现闭锁。",
  },
  {
    a: "23",
    b: "井下无轨运人车辆存在下列情形之一的：- 8 -1.未取得金属非金属矿山矿用产品安全标志；2.载人数量超过 25 人或者超过核载人数；3.制动系统采用干式制动器，或者未同时配备行车制动系统、驻车制动系统和应急制动系统；4.未按国家规定对车辆进行检测检验。",
  },

  {
    a: "24",
    b: "一级负荷未采用双重电源供电，或者双重电源中的任一电源不能满足全部一级负荷需要。",
  },

  {
    a: "25",
    b: "向井下采场供电的 6kV—35kV 系统的中性点采用直接接地。",
  },
  {
    a: "26",
    b: "工程地质或者水文地质类型复杂的矿山，井巷工程施工未进行施工组织设计，或者未按施工组织设计落实安全措施",
  },
  {
    a: "27",
    b: "新建、改扩建矿山建设项目有下列行为之一的：1.安全设施设计未经批准，或者批准后出现重大变更未经再次批准擅自组织施工；2.在竣工验收前组织生产，经批准的联合试运转除外",
  },
  {
    a: "28",
    b: "矿山企业违反国家有关工程项目发包规定，有下列行为之一的：1.将工程项目发包给不具有法定资质和条件的单位，或者承包单位数量超过国家规定的数量；2.承包单位项目部的负责人、安全生产管理人员、专业技术人员、特种作业人员不符合国家规定的数量、条件或者不属于承包单位正式职工",
  },
  {
    a: "29",
    b: "井下或者井口动火作业未按国家规定落实审批制度或者安全措施",
  },
  {
    a: "30",
    b: "矿山年产量超过矿山设计年生产能力幅度在 20%及以上，或者月产量大于矿山设计年生产能力的 20%及以",
  },
  {
    a: "31",
    b: "矿井未建立安全监测监控系统、人员定位系统、通信联络系统，或者已经建立的系统不符合国家有关规定，或者系统运行不正常未及时修复，或者关闭、破坏该系统，或者篡改、隐瞒、销毁其相关数据、信息。",
  },
  {
    a: "32",
    b: "未配备具有矿山相关专业的专职矿长、总工程师以及分管安全、生产、机电的副矿长，或者未配备具有采矿、地质、测量、机电等专业的技术人员",
  },
]);
const edit = (val) => {
  Form.value = {
    id: val.id,
    serialNumber: val.serialNumber,
    type: val.type,
    checklistContents: val.checklistContents,
    circumstance: val.circumstance,
    remark: val.remark,
    edit: true,
  };

  visible.value = true;
};
const visible = ref(false);
const submitSecurity = async (val) => {
  console.log(val);
  if (val.value.edit == true) {
    visible.value = false;
    let result = await putCorporateProductionResponsibility(val.value);
    if (result.code == 0) {
      Notification({
        title: "成功",
        message: "修改成功",
        type: "success",
      });
    } else {
      Notification({
        title: "失败",
        message: result.message,
        type: "error",
      });
    }
    changeTable();
  } else {
    visible.value = false;
    let result = await addCorporateProductionResponsibility(val.value);
    if (result.code == 0) {
      Notification({
        title: "成功",
        message: "新增成功",
        type: "success",
      });
    } else {
      Notification({
        title: "失败",
        message: result.msg,
        type: "error",
      });
    }
    changeTable();
  }
  Form.value = {
    id: null,
    serialNumber: null,
    type: null,
    checklistContents: null,
    circumstance: null,
    remark: null,
  };
};
const Form = ref({
  id: null,
  serialNumber: null,
  type: null,
  checklistContents: null,
  circumstance: null,
  remark: null,
});

const paginationConfig = ref({
  page: 1,
  size: 10,
  total: 0,
});
const changePage = (val) => {
  paginationConfig.value.page = val;
  changeTable();
};
const changeSize = (val) => {
  paginationConfig.value.size = val;
  changeTable();
};
import {
  getCorporateProductionResponsibility,
  deleteCorporateProductionResponsibility,
  addCorporateProductionResponsibility,
  putCorporateProductionResponsibility,
} from "@/api/safetymanagement";
import { ref, defineComponent, onMounted } from "vue";
import myTable from "@/components/my-table.vue";
import myDialog from "@/components/my-dialog.vue";
const NewComponentName = defineComponent({
  name: "NewComponentName",
});
console.log(NewComponentName);

import { Notification } from "element-ui";

const isLoading = ref(true);
const deleteRow = (id) => {
  selectList.value = [id];
  deleteList();
};
const changeTable = async (name) => {
  isLoading.value = true;
  let result = await getCorporateProductionResponsibility(
    paginationConfig.value.page,
    paginationConfig.value.size,
    name
  );
  console.log(result.message);
  console.log(result.data);
  paginationConfig.value.total = Number(result.message);
  isLoading.value = false;
  // data.value = result.data;
};
onMounted(() => {
  changeTable();
});
//上传文件
// const addFile = async (list) => {
//   let result = await addCorporateProductionResponsibility({
//     fileName: list[0].name,
//     fileUrl: list[0].url,
//   });
//   if (result.code == 0) {
//     Notification({
//       title: "成功",
//       message: "上传成功",
//       type: "success",
//     });
//     changeTable();
//   } else {
//     Notification({
//       title: "失败",
//       message: "上传失败",
//       type: "error",
//     });
//   }
// };
//批量选择的数据
const selectList = ref();
const selectionChange = (value) => {
  selectList.value = value;
};
//删除所选中的
const deleteList = async () => {
  if (selectList.value.length == 0) {
    Notification({
      title: "警告",
      message: "请选择要删除的项",
      type: "warning",
    });
    return;
  }
  let result = await deleteCorporateProductionResponsibility(selectList.value);
  if (result.code == 0) {
    Notification({
      title: "成功",
      message: "删除成功",
      type: "success",
    });
    paginationConfig.value.page = 1;
    changeTable();
  } else {
    Notification({
      title: "失败",
      message: "删除失败",
      type: "error",
    });
  }
};
//选中的id
selectionChange([]);
const table = ref(null);
</script>
<style lang="scss" scoped>
// :deep(.cell) {
//   display: flex;
//   justify-content: space-around;
// }
/*去除upload组件过渡效果*/
::v-deep .el-upload-list__item {
  transition: none !important;
}
::v-deep .el-upload-list__item-thumbnail {
  /* 图片在方框内显示长边 */
  object-fit: scale-down !important;
}
:deep(.el-input__inner) {
  height: auto !important;
}
:deep(.el-icon-arrow-right:before) {
  font-size: 12px !important;
}
:deep(.el-table th) {
  background: #fafafa;
}
:deep(.el-collapse-item__header) {
  font-weight: bold;
  color: #333;
  font-size: 15px;
  padding: 0 10px;
}
:deep(.el-icon-arrow-right:before) {
  font-weight: bold;
  color: #333;
  font-size: 25px;
}
body {
  min-height: 100vh;

  transition: all 0.3s ease;
}
.container {
  height: 100%;
  padding: 15px;
  overflow: auto;
  box-sizing: border-box;

  .main-content {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    min-width: 700px;

    .header-container {
      padding: 15px 15px;
      border-bottom: solid 1px #e6e6e6;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .title {
        position: relative;
        font-weight: bold;
        color: #333;
        font-size: 15px;
        padding-left: 16px;

        &::before {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }

        &::after {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }
      }
    }
  }
}

.main {
  padding: 12px 15px;

  .item-content {
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    .item-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .subheading {
        position: relative;
        color: #555;
        font-size: 14px;
        padding-left: 14px;

        &::after {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 0;
          top: calc(50% - 7px);
          position: absolute;
        }

        &::before {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 4px;
          top: calc(50% - 7px);
          position: absolute;
        }
      }
    }

    .content-container {
      margin-top: -1px;
    }
  }
}

.w-100 {
  width: 100%;
}

.item-form-content {
  display: flex;
  flex-direction: row;
  align-items: center;

  i {
    margin: 0 10px;
  }
}

.productList-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  height: 40px;
}

.form-content {
  padding: 0 10px;
}
.dialog-action-bar {
  text-align: center;
  margin-top: 30px;
}
</style>
